<!-- 官方文档 -->
<!-- https://github.com/jonmiles/bootstrap-treeview/blob/master/README.md -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tree</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        .tree {
            cursor: pointer;
            margin: 20px;
            position: relative;
        }
        
        .tree .inputBox {
            width: max-content;
            line-height: 30px;
            display: flex;
        }
        
        .tree .inputBox label {
            margin-right: 10px;
        }
        
        .tree .inputBox .pBox {
            position: relative;
        }
        
        .tree .inputBox .pBox .treeInput {
            font-weight: bold;
            width: 230px;
            height: 30px;
            box-sizing: border-box;
            line-height: 30px;
            text-align: center;
            border: 1px solid #dedede;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            padding-right: 30px;
        }
        
        .tree .selectBox {
            min-width: 230px;
            position: absolute;
            z-index: 9999;
            box-shadow: 0 0 5px #999;
            top: 33px;
            left: 43px;
        }
        
        .tree .selectBox .dataBox {
            max-height: 560px;
            overflow: auto;
        }
        
        .tree .selectBox .buttonBox {
            background: #fff;
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid #ccc;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }
        
        .tree .selectBox .buttonBox button {
            outline: none;
            border: none;
            font-size: 13px;
            display: inline-block;
            background: #1492ff !important;
            color: #fff;
            border-radius: 3px;
            padding: 6px 10px;
        }
        
        .tree .selectBox .buttonBox button:first-of-type {
            margin-right: 10px;
        }
        
        .pBox::after {
            display: inline-block;
            content: '';
            width: 0;
            height: 0;
            border: 6px solid #666;
            border-top-color: #666;
            border-bottom-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
            position: absolute;
            top: 13px;
            right: 10px;
        }
        
        .dtree {
            width: 230px !important;
        }
        
        .dtree-theme-item-this {
            background-color: #1492ff !important;
            color: #fff !important;
        }
        
        .dtree-theme-item:hover {
            background-color: #1492ff !important;
            color: #fff !important;
        }
        
        .dtree-theme-icon {
            color: #000 !important;
        }
        
        .dataBox>ul>.dtree-nav-item {
            padding-left: 0px !important;
        }
        
        .dtree-nav-item {
            padding-left: 12px !important;
        }
    </style>
</head>

<body>
    <div class="tree">
        <div class="inputBox">
            <label for="">区域:</label>
            <div class='pBox'>
                <input type="text" value='中国' readonly class='treeInput'>
            </div>

        </div>
        <div class="selectBox" style='display: none;'>
            <div class="dataBox">
                <div id="NationalPatent" class="" style='width:230px'></div>
            </div>
            <div class="buttonBox">
                <button id='confirm'>确认</button>
                <button id='cancel'>取消</button>
            </div>
        </div>
    </div>

</body>
<!-- <script src="./jquery-3.3.1.js"></script> -->
<script src="./jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>

<script src="./bootstrap-treeview.js"></script>
<script>
    var tree = [{
        text: "Parent1",
        nodes: [{
            text: "Child1",
            id: 11,
            nodes: [{
                text: "Grandchild1",
                id: 444,
            }, {
                text: "Grandchild2",
                id: 0000,
            }]
        }, {
            text: "Child2"
        }]
    }, {
        text: "Parent2",
        nodes: [],
    }, {
        text: "Parent3"
    }, {
        text: "Parent4"
    }, {
        text: "Parent5"
    }];


    //加载根节点
    function getTree() {
        var tree = null;
        $.ajax({
            type: "post",
            url: "/http://192.168.10.168:8082/org/loadExtTreeData?parentId=F364407A1AF44B5FA1B8E39C1CBB9447",
            async: false,
            dataType: 'json',
            data: {},
            beforeSend: function() {
                // layer.load();
            },
            complete: function() {
                // layer.closeAll('loading'); //关闭loading
            },
            success: function(data) {
                console.log(data);
                tree = data;
            }
        })
        return tree;
    }


    $(function() {
        //初始化treeview

        $('#NationalPatent').treeview({
            // data: getTree(),
            data: tree,
            showTags: true,
            // enableLinks: true,
            levels: 0,
            showTags: true,
        });
        $('#NationalPatent').on('nodeSelected', function(event, data) {
            // alert(1);
            console.log(data);
            $('#confirm').click(function() {
                $('.treeInput').val(data.text);
                $(".selectBox").hide();
            })
        });

        //treeview节点展开事件
        $('#NationalPatent').on('nodeExpanded', function(event, data) {
            console.log(data); //data 当前行的数据
            console.log(data.id);
            var id = data['nodeId']; //获取节点的nodeid （nodeid是treeview自动生成的，每个节点不同）
            $.ajax({ //异步加载当前节点的子节点数据
                type: "post",
                url: "/GuideSeach/InitIPCTreeViewByFatherID",
                async: false,
                dataType: 'json',
                data: {
                    PIPC: data['text']
                },
                beforeSend: function() {
                    // layer.load();
                },
                complete: function() {
                    // layer.closeAll('loading'); //关闭loading
                },
                success: function(result) {
                    //再添加节点前，需要清空展开节点下的子节点，否则会累计很多节点。
                    $("#NationalPatent").treeview("deleteChildrenNode", id); //删除当前节点下的所有子节点
                    //根据返回的数据源，添加子节点
                    for (var i = 0; i < result.length; i++) {
                        //result[i]的格式如下图
                        $("#NationalPatent").treeview("addNode", [id, {
                            node: result[i],
                            silent: true
                        }]);
                    }
                }
            })
        });
    });
    // $('#NationalPatent').treeview('collapseAll', {
    //     silent: false //设置初始化节点关闭
    // });
    // $('#NationalPatent').on('onNodeSelected', function(event, data) {
    //         console.log(event, node);
    //     })
    // $('#treeview-searchable').treeview('search', ['Grandchild2', {
    //     ignoreCase: true, // case insensitive
    //     exactMatch: false, // like or equals
    //     revealResults: true, // reveal matching nodes
    // }]);
    // $('#NationalPatent').treeview('selectNode', ["Parent1", {
    //     silent: true
    // }]);
    // $('#NationalPatent').treeview('checkAll', {
    //     silent: true
    // });

    $(".inputBox").click(function() {
        $(this).parent().find('.selectBox').show();
    })
    $('#cancel').click(function() {
        // alert(1);
        $(".selectBox").hide();
    })
</script>

</html>